<template>
<div style="width: 100%; height: 100%;position:relative">
    <div style="width: 100%; height: 100%;" ref="chartsDOM"></div>
    <!-- <div class="textFixed">{{name}}产业集群</div> -->
</div>
  
</template>
<script>
import * as echarts from 'echarts'
import getGuangXiMap from '../../api/json/xiangHe'
import sanHe from '../../api/json/sanHe'
import guangYang from '../../api/json/guangYang'
import daChang from '../../api/json/daChang'



import daCheng from '../../api/json/daCheng'
import guAn from '../../api/json/guAn'
import yongQing from '../../api/json/yongQing'
import anCi from '../../api/json/anCi'
import baZhou from '../../api/json/baZhou'
import wenAn from '../../api/json/wenAn'

export default {
  data() {
    return {
      name:'',
      dataInfo:[],
      dataList:[],
      name:'',
      contentLeft:{}
    }
  },
  created() {
    this.name = this.$route.query.name
    let county = this.$route.query.county
    this.contentLeft = JSON.parse(localStorage.getItem('content'))
    this.getMap(this.name,county)
  },
  mounted() {
    
  },
  methods: {
    getMap(name,code) {
      switch(code){
        case '131082':
          // 三河
          echarts.registerMap('GX', sanHe)
          break;
        case '131028':
          // 大厂回族自治县
          echarts.registerMap('GX', daChang)
          break;
        case '131024':
          // 香河县
          echarts.registerMap('GX', getGuangXiMap)
          break;
        case '131003':
          // 广阳区
          echarts.registerMap('GX', guangYang)
          break;
        case '131022':
          // 固安县
          echarts.registerMap('GX', guAn)
          break;
        case '131023':
          // 永清县
          echarts.registerMap('GX', yongQing)
          break;
        case '131002':
          // 安次区
          echarts.registerMap('GX', anCi)
          break;
        case '131081':
          // 霸州市
          echarts.registerMap('GX', baZhou)
          break;
        case '131026':
          // 文安县
          echarts.registerMap('GX', wenAn)
          break;
        case '131025':
          // 大城县
          echarts.registerMap('GX', daCheng)
          break;
      }
    },
    initMap(data) {
      this.dataInfo = data
      this.dataList = []
      data.forEach(item=>{
        let obj = {
          name: item.name,
          value: [Number(item.longitude), Number(item.latitude), item.yysr],
          itemStyle: {
            color: 'rgb(114,137,205)',
          },
          rippleEffect: {
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大 4
          },
        }
        this.dataList.push(obj)
      })
      let dataList = this.dataList
      var myChart = echarts.init(this.$refs['chartsDOM'])
      myChart.showLoading()
      myChart.hideLoading()
      let that = this
      //echarts.registerMap('GX', getGuangXiMap)
      var option = {
        tooltip: {
          backgroundColor: 'rgba(50,50,50,0.5)',
          formatter: function (params,index2) {
            if(params.componentIndex==0) {
              let index = params.dataIndex
              let iteme = that.dataInfo[index]
              return (
                '<span style="color: #07a6ff;font-size:18px;font-weight:600 ">' +params.name +"</span>"+"<br/>"+
                `营业收入：${iteme.yysr||'-'}亿元<br/>上缴税金：${iteme.sjsj||'-'}亿元<br/>从业人员: ${iteme.cyrs||'-'}人`
              );
            } else {
              return (
                '<span style="color: #07a6ff;font-size:18px;font-weight:600 ">' +params.name +"</span>"+"<br/>"+
              `企业数量：${that.contentLeft.qyzs||'-'}<br/>营业收入：${that.contentLeft.yysr||'-'}亿元<br/>上缴税金：${that.contentLeft.sjsj||'-'}亿元<br/>从业人员: ${that.contentLeft.cyrs||'-'}人`
              );
            }
            
          },
        },
        geo: {
          show: true,
          map: 'GX',
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: '#fff',
                fontSize: 18,
                fontWeight: 'lighter',
              },
            },
            emphasis: {
              //动态展示的样式
              color: '#fff',
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              show: true,
              areaColor: 'rgb(55,140,249)',
              borderColor: 'rgb(41,200,255)',
              borderWidth: 1,
              color: '#ffffff',
              textStyle: {
                color: '#ffffff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#ffffff',
              },
              label: {
                color: '#ffffff',
                fontSize: 18,
              },
              areaColor: 'rgb(41,200,255)',
            },
          },
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            data: dataList
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            data: [
              {
                name: that.contentLeft.name,
                value: [Number(that.contentLeft.longitude), Number(that.contentLeft.latitude)],
                itemStyle: {
                  color: '#1DF9FC',
                },
                rippleEffect: {
                  period: 4, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 4, //波纹圆环最大限制，值越大波纹越大 4
                },
              }
            ]
          }
        ],
      }
      myChart.setOption(option)
      myChart.on('click', function (params,params2) {
          const idx = params.dataIndex;
          if(params.value) {
            let obj = that.dataInfo[idx]
            that.$emit('selectObj',obj)
          }
      });
    }
  },
}
</script>
<style lang="less" scoped>
.textFixed{
    position: absolute;
    bottom:50px;
    left:50%;
    transform: translateX(-50%);
    color:#00ffff;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
    text-align: center;
}
</style>